import React, { Component } from 'react'
import { Card,Form,Input,Button } from 'antd'

import { connect } from 'react-redux'

import { loginAsync } from "../../store/user/actionCreators"

class Login extends Component {
  render() {
	  
	  const layout = {
	    labelCol: {
	      span: 4,
	    },
	    wrapperCol: {
	      span: 20,
	    },
	  }
    return (
      <div>
        <Form
             {...layout}
             name="basic"
             onFinish={ this.submit }
           >
             <Form.Item
               label="用户名"
               name="userName"
               rules={[
                 {
                   required: true,
                   message: '请输入用户名',
                 },
               ]}
             >
               <Input/>
             </Form.Item>
        	<Form.Item
        	  label="密码"
        	  name="pwd"
        	  rules={[
        	    {
        	      required: true,
        	      message: '请输入密码',
        	    },
        	  ]}
        	>
        	  <Input.Password />
        	</Form.Item>
             <Form.Item wrapperCol={ { offset:4,span:20 } }>
               <Button type="primary" htmlType="submit">
                 提交
               </Button>
             </Form.Item>
           </Form>
      </div>
    )
  }
  submit = (userInfo)=>{
	 this.props.login(userInfo,this.props.history.push)
  } 
}
const mapStateToProps = ()=>{
	return {}
}
const mapDispatchToProps = (dispatch)=>{
	return {
		login:(userInfo,push)=>{
			dispatch(loginAsync(userInfo,push))
		}
	}
}



export default connect(mapStateToProps,mapDispatchToProps)(Login);